<template>
    <div class="sign">
        <div class="sign_content">
            <img :src="src" style='width:780px;height:450px'/>
        </div>
        
        <div class="btn">
            <el-button type="primary" @click="save">确定</el-button>
            <el-button type="danger" @click="closes">关闭</el-button>
        </div>
        
    </div>
</template>
<script>
export default {
    name:"sign",
    props:["signKey","signKey2","data","signUrl"],
    data(){
        return{
            apiUrl:"http://localhost:8089/PPSignSDK/",
            isPolling:false,
            src:"",
            signatureImg:"",
            LastSignatureBase64Data:"",
            token:"",
            isSignStop:"N",
            pId:"",
            cId:"",
            sId:""

        }
    },
    beforeDestroy(){
        try{
            this.uninitDevice();
        }catch(e){}
       
        
    },
    created(){
        let ids=this.signKey.split(".");
        this.pId=ids[0];
        this.cId=ids[1];
        this.sId=this.data[this.pId][this.cId]
        this.token=sessionStorage.getItem("token");
      
        this.initDevice();
    },
    methods:{
        save(){
            this.getSize();
            
        },
        saves(){
            this.$post("business","/api/file/fileUploadBase64",{data:this.src.replace("data:image/png;base64,",""),token:this.token}).then(data=>{
                
                let url=data[0].url;
                let f_id=data[0].f_id;
                if(this.signKey2){
                    let ids=this.signKey2.split(".");
                    this.data[ids[0]][ids[1]]=url;
                }
                
                sessionStorage.setItem("reloadImg","Y")
                if(this.sId&&this.signUrl){
                    this.$post("",this.signUrl,{sId:this.sId,url:url}).then(data=>{
                        this.$emit("closes","");
                    });
                }else{
                    if(this.signKey2){
                        this.$emit("closes","");
                    }else{
                        this.$message.error('请先保存数据;在重新签名');
                        this.$emit("closes","");
                    }
                   
                }
               
                
            });
        },
        closes(){
            this.$emit("closes","")
        },
        getSize(){
            let sef=this;
            let initUrl = this.apiUrl + 'GetSize';
           
            //步骤一:创建异步对象
            var ajax = new XMLHttpRequest();
            //步骤二:设置请求的url参数,参数一是请求的类型,参数二是请求的url,可以带参数,动态的传递参数starName到服务端
            ajax.open('get',initUrl);
            //步骤三:发送请求
            ajax.send();
            //步骤四:注册事件 onreadystatechange 状态改变就会调用
            ajax.onreadystatechange = function () {   
                if (ajax.readyState==4 &&ajax.status==200) {
                    if(ajax.responseText){
                        let result=""+ajax.responseText.replace("\"","").replace("\"","");;
                       console.log("s=="+result+"=","size==============")
                       console.log(ajax.responseText=='-8',"sizews==========")
                       console.log(result=="-8"||result==-8,"sizews==========")
                       if(result=="-8"||result==-8){
                            sef.$alert('请签名', '提示', {
                                confirmButtonText: '确定',
                                callback: action => {
                                
                                }
                            });
                       }else{
                            sef.saves()
                       }
                    }
                    //步骤五 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的　　　　console.log(ajax.responseText);//输入相应的内容  　　}
                }
            }
          
        },
        initDevice(){
            let sef=this;
            let initUrl = this.apiUrl + 'InitialDevice?id=2&width=580&height=380';
           
            //步骤一:创建异步对象
            var ajax = new XMLHttpRequest();
            //步骤二:设置请求的url参数,参数一是请求的类型,参数二是请求的url,可以带参数,动态的传递参数starName到服务端
            ajax.open('get',initUrl);
            //步骤三:发送请求
            ajax.send();
            //步骤四:注册事件 onreadystatechange 状态改变就会调用
            ajax.onreadystatechange = function () {   
                if (ajax.readyState==4 &&ajax.status==200) {
                    if(ajax.responseText){
                        sef.isPolling=true;
                         sef.src="";
                        ///sef.context.clearRect(0, 0, sef.canvas.width, sef.canvas.height);
                        sef.getInk();
                        sef.getStatus();
                    }
                    //步骤五 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的　　　　console.log(ajax.responseText);//输入相应的内容  　　}
                }
            }
          
            
        },
        getInk(){
            let getInkUrl = this.apiUrl + 'GetInks';
            
            let sef=this;
            var timeId = setTimeout(function () {
                clearTimeout(timeId);
                if(sef.isPolling){
                    //步骤一:创建异步对象
                    var ajax = new XMLHttpRequest();
                    //步骤二:设置请求的url参数,参数一是请求的类型,参数二是请求的url,可以带参数,动态的传递参数starName到服务端
                    ajax.open('get',getInkUrl);
                    //步骤三:发送请求
                    ajax.send();
                    //步骤四:注册事件 onreadystatechange 状态改变就会调用
                    ajax.onreadystatechange = function () {   
                        if (ajax.readyState==4 &&ajax.status==200) {
                            
                            let text=ajax.responseText
                            let dataInfos =JSON.parse(text);
                            try{
                                dataInfos =JSON.parse(dataInfos);
                            }catch(e){}
                            for(let i=0;i<dataInfos.length;i++){

                                let item=dataInfos[i];
                                if (item.EventType === 0) {
                                    //sef.drawImage(value.Image);
                                    sef.LastSignatureBase64Data = item.Image;
                                    sef.drawImage(sef.LastSignatureBase64Data);
                                }
                            }
                            if(sef.isSignStop=='N')
                                sef.getInk();
                            //步骤五 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的　　　　console.log(ajax.responseText);//输入相应的内容  　　}
                        }
                    }
                }
                
            },500);
        },
        getStatus(){
            let confirmStatusUrl = this.apiUrl + 'GetDeviceConfirmOrCancelKeyStatus';
            let sef=this;
            var timeId = setTimeout(function () {
                clearTimeout(timeId);
                if(sef.isPolling){
                    //步骤一:创建异步对象
                    var ajax = new XMLHttpRequest();
                    //步骤二:设置请求的url参数,参数一是请求的类型,参数二是请求的url,可以带参数,动态的传递参数starName到服务端
                    ajax.open('get',confirmStatusUrl);
                    //步骤三:发送请求
                    ajax.send();
                    //步骤四:注册事件 onreadystatechange 状态改变就会调用
                    ajax.onreadystatechange = function () {   
                        if (ajax.readyState==4 &&ajax.status==200) {
                            
                            let text=ajax.responseText.replace("\"","").replace("\"","");
                            if (text == "1") {
                                //sef.drawImage(sef.LastSignatureBase64Data);
                               // console.log("11111")
                                //sef.isPolling=false;
                            } else if (text == "0") {
                                sef.clearInk();
                              //  console.log("clear===")
                            }
                            if(this.isSignStop=='N')
                                sef.getStatus();
                            //步骤五 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的　　　　console.log(ajax.responseText);//输入相应的内容  　　}
                        }
                    }
                }
                
            },500);
        },
        clearInk(){
            let sef=this;
            var clrInkUrl = this.apiUrl + 'Clear';
            var ajax = new XMLHttpRequest();
            //步骤二:设置请求的url参数,参数一是请求的类型,参数二是请求的url,可以带参数,动态的传递参数starName到服务端
            ajax.open('get',clrInkUrl);
            //步骤三:发送请求
            ajax.send();
            //步骤四:注册事件 onreadystatechange 状态改变就会调用
            ajax.onreadystatechange = function () {   
                if (ajax.readyState==4 &&ajax.status==200) {
                    
                    sef.src="";
                    sef.signatureImg="";
                    //sef.context.clearRect(0, 0, sef.canvas.width, sef.canvas.height);
                    //步骤五 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的　　
                    
                }
            }
        },
        drawImage(base64) {
            //console.log("111")
            var dataUrl = 'data:image/jpeg;base64,';
            let sef=this;
            dataUrl = dataUrl + base64;
            sef.src=dataUrl;
            sef.signatureImg=dataUrl;
            /*console.log(sef.context)
            // 在image中載入圖檔，再畫到canvas呈現
            var img = new Image();

            img.addEventListener('load', function () {
                sef.context.drawImage(this, 0, 0, sef.canvas.width, sef.canvas.height);
            }, false);

            img.src = dataUrl;*/
        },
        uninitDevice() {
            //event.preventDefault();
            this.isPolling = false;
            let sef=this;
            var uninitUrl = this.apiUrl + 'UninitialDevice?id=2';
            var ajax = new XMLHttpRequest();
            //步骤二:设置请求的url参数,参数一是请求的类型,参数二是请求的url,可以带参数,动态的传递参数starName到服务端
            ajax.open('get',uninitUrl);
            //步骤三:发送请求
            ajax.send();
            //步骤四:注册事件 onreadystatechange 状态改变就会调用
            ajax.onreadystatechange = function () {   
                if (ajax.readyState==4 &&ajax.status==200) {
                    if(ajax.responseText){
                        sef.src="";
                        
                        //sef.signatureImg="";
                       // sef.context.clearRect(0, 0, sef.canvas.width, sef.canvas.height);
                    }
                   
                }
            }

        },
    }
}
</script>
<style scoped>
.sign{
    height:100%;
    width:100%;
    overflow: hidden;
    display:flex;
    flex-direction: column;
}
.sign_content{
    flex:1;
}
.btn{
    text-align:center;
}
</style>